<template>
	<view class="article-item-container" @click.stop="itemClick">
		<view class="user-info">
			<u-image class="avatar" height="60" width="60" shape="circle" :show-loading="true" :src="userAvatarSrc">
				<u-loading slot="loading" mode="flower" />
			</u-image>
			<text class="name">{{article.author || "未知作者"}}</text>
			<text class="time">{{article.niceDate}}</text>
		</view>
		<view class="desc">
			<text class="title u-line-2">{{article.title}}</text>
			<u-image v-if="article.envelopePic" class="image" height="100" width="80" :show-loading="true"
				:src="article.envelopePic">
				<u-loading slot="loading" mode="flower" />
			</u-image>
		</view>
		<view class="info">
			<text class="top" v-if="article.isTop">置顶</text>
			<text class="chapter-name">{{chapterName}}</text>

			<view @click.stop="likeClick" class="heart">
				<gal-css-animate ref="heartAnimate" :autoPlay="false" animateName="heartBeat" duration="1500ms" timingFunction="ease-in">
					<u-icon custom-prefix="custom-icon" :name="article.collect?'shoucang':'shoucang-copy'" color="red"
						size="40" />
				</gal-css-animate>
			</view>
		</view>
	</view>
</template>

<script>
	// import uImage from "uview-ui/components/u-image/u-image.vue"
	export default {
		name: "article-item",
		props: {
			article: {
				type: Object,
				required: true,
			},

			index: {
				type: Number,
				required: true,
			}
		},
		computed: {
			chapterName() {
				return this.article.superChapterName + '·' + this.article.chapterName;
			},
			userAvatarSrc() {
				let time = new Date();
				return `http://placeimg.com/64/64/people?t=${time.getTime() + Math.random()*10}`;
			}
		},
		methods: {
			itemClick() {
				this.$emit("itemClick", this.index, this.article);
			},
			async likeClick() {
				if (this.article.collect) {
					await this.$u.api.uncollectArticle(this.article.id);
					this.$emit("likeClick", this.index, false);
				} else {
					await this.$u.api.collectArticle(this.article.id);
					this.$emit("likeClick", this.index, true);
				}

				this.$refs.heartAnimate.play();
			}
		},
	}
</script>

<style lang="scss" scoped>
	$margin-value:10rpx;

	.article-item-container {
		display: flex;
		flex-direction: column;
		padding: 35rpx 20rpx;
		margin-bottom: 30rpx;
		width: 100%;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0px 5px 10px $u-type-info-disabled;
		color: $u-content-color;
	}

	.desc {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 120rpx;

		.title {
			flex: 1;
		}

	}

	// 用户信息与发布时间
	.user-info {
		display: flex;
		align-items: center;

		.avatar {
			border-radius: 50%;
		}

		.name {
			margin-left: $margin-value;
		}

		.time {
			flex: 1;
			text-align: right;
		}
	}

	.title {
		margin: 20rpx $margin-value;
	}

	//文章信息栏
	.info {
		position: relative;
		display: flex;
		align-items: center;

		.top {
			font-size: 20rpx;
			padding: 5rpx 10rpx;
			color: $u-type-primary;
			border-radius: 5rpx;
			border: 1px solid $u-type-primary;
		}

		.chapter-name {
			margin-left: $margin-value;
		}

		.heart {
			position: absolute;
			right: 0;
			padding: 20rpx;
		}
	}
</style>
